<template>
  <el-dialog
    class="add-material-type-comp"
    title="新增枚举"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(950)"
    :before-close="handleCancel">
    <el-form
      :model="ruleForm"
      :rules="rules"
      label-suffix="："
      size="medium"
      ref="ruleForm"
      :label-width="$setRem(140)"
      class="rule-form"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="材料名称" prop="materialName" required>
            <el-input
              type="text"
              placeholder="请输入材料名称"
              v-model="ruleForm.materialName">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位" prop="unit" required>
            <el-input
              type="text"
              placeholder="请输入单位"
              v-model="ruleForm.unit">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入备注"
              v-model="ruleForm.remark">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
<!--    <div class="btn-container">-->
<!--      <el-button-->
<!--        type="primary"-->
<!--        size="small"-->
<!--        icon="el-icon-plus"-->
<!--        @click="handleAdd">新建</el-button>-->
<!--      <el-button-->
<!--        type="danger"-->
<!--        size="small"-->
<!--        icon="el-icon-delete"-->
<!--        @click="handleDelete">删除</el-button>-->
<!--    </div>-->
<!--    <el-table-->
<!--      class="table-container"-->
<!--      :data="tableData"-->
<!--      element-loading-custom-class="custom-load"-->
<!--      @selection-change="handleSelectionChange"-->
<!--      row-key="id">-->
<!--      <el-table-column type="selection" width="55"></el-table-column>-->
<!--      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>-->
<!--      <el-table-column label="规格名称" show-overflow-tooltip prop="modelName" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <el-input-->
<!--            v-if="scope.row.idFlag"-->
<!--            clearable-->
<!--            placeholder="请输入规格名称"-->
<!--            :value="scope.row.modelName"-->
<!--            @input="(val) => handleSet(val, scope.row, 'modelName')">-->
<!--          </el-input>-->
<!--          <span v-else>{{ scope.row.modelName }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="备注" show-overflow-tooltip prop="remark" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <el-input-->
<!--            v-if="scope.row.idFlag"-->
<!--            clearable-->
<!--            placeholder="请输入备注"-->
<!--            :value="scope.row.remark"-->
<!--            @input="(val) => handleSet(val, scope.row, 'remark')">-->
<!--          </el-input>-->
<!--          <span v-else>{{ scope.row.remark }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      &lt;!&ndash;      <el-table-column label="操作" align="center">&ndash;&gt;-->
<!--      &lt;!&ndash;        <template slot-scope="scope">&ndash;&gt;-->
<!--      &lt;!&ndash;          <span class="btn" @click="handleEdit(scope.row)">编辑</span>&ndash;&gt;-->
<!--      &lt;!&ndash;        </template>&ndash;&gt;-->
<!--      &lt;!&ndash;      </el-table-column>&ndash;&gt;-->
<!--      <div class="empty-content" slot="empty">-->
<!--        <i class="iconfont iconwushuju"></i>-->
<!--        <p>暂无数据</p>-->
<!--      </div>-->
<!--    </el-table>-->
    <span slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        type="primary"
        :loading="loading"
        @click="hanldeSave">
        确 认
      </el-button>
      <el-button size="medium" @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    },
    options: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      multipleSelection: [],
      addVisible: false,
      currentData: {},
      tableData: [],
      ruleForm: {
        id: '',
        materialName: '',
        unit: '',
        remark: ''
      },
      rules: {
        materialName: [
          { required: true, message: '请输入材料名称' },
        ],
        unit: [
          { required: true, message: '请输入单位' },
        ],
      },
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        Object.keys(this.ruleForm).forEach(key => {
          this.ruleForm[key] = '';
        });
        this.clear();
      }
    },
    options: {
      deep: true,
      handler(data) {
        const keys = Object.keys(this.ruleForm);
        data && Object.keys(data).length && keys.forEach(key => {
          this.ruleForm[key] = data[key];
        });
        this.tableData = data.materialTypeModels || [];
      }
    }
  },
  methods: {
    // 清除参数
    clear() {
      this.tableData = [];
      this.multipleSelection = [];
    },
    // 选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 新建
    handleAdd() {
      const params = {
        modelName: '',
        remark: '',
        idFlag: this.$getRandomNum()
      };
      if (this.type === 'edit') {
        params.materialTypeId = this.options.id;
      }
      this.tableData.unshift(params);
    },
    // 设置规格
    handleSet(val, row, type) {
      const { idFlag, id } = row;
      const currentId = id || idFlag;
      const item = this.tableData.find(v => {
        return currentId === (v.id || v.idFlag);
      });
      if (item) {
        item[type] = val;
      }
    },
    handleDelete() {
      if (!this.multipleSelection.length) {
        return this.$message.warning('请勾选选项');
      }
      this.tableData = this.tableData.filter(item => {
        const itemId = item.id || item.idFlag;
        return !this.multipleSelection.some(v => {
          return (v.id || v.idFlag) === itemId;
        });
      });
      this.multipleSelection = [];
    },
    // 取消
    handleCancel() {
      this.$emit('cancel');
    },
    // 保存
    hanldeSave() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('submit', this.ruleForm);
          // if (!this.tableData.length) {
          //   this.$message.warning('请添加规格');
          //   return;
          // }
          // this.$emit('submit', {
          //   ...this.ruleForm,
          //   materialTypeModels: this.tableData
          // });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';
  .btn-container {
    margin: 10px 0;
    text-align: right;
  }
  .table-container {
    /deep/ .el-table__body-wrapper {
      max-height: 240px;
      overflow-y: auto;
    }
  }
</style>
